<template>
  <div>
    <h2>个性化设置</h2>
    <el-form label-width="100px">
      <el-form-item label="主题">
        <el-select v-model="currentTheme" style="max-width: 100px;">
          <el-option label="亮色" value="light" />
          <el-option label="暗色" value="dark" />
        </el-select>
      </el-form-item>
<!--      <el-button type="primary" @click="saveTheme">保存</el-button>-->
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { useThemeStore } from '@/stores/theme';

const themeStore = useThemeStore();

// 使用 computed 属性来同步 store 中的主题状态到本地变量 currentTheme
const currentTheme = computed({
  get: () => themeStore.isDark ? 'dark' : 'light',
  set: (value) => {
    // 根据选择的值切换主题，并更新 store 状态
    if (value === 'dark') {
      themeStore.toggleTheme(true);
    } else {
      themeStore.toggleTheme(false);
    }
    // 更新菜单样式类（如果需要）
    document.querySelector('.el-menu')?.classList.toggle('dark-menu', value === 'dark');
  }
});

// 定义一个方法用于处理保存按钮点击事件
const saveTheme = () => {
  // 这里可以添加保存主题设置到持久化存储的逻辑（如 localStorage）
  console.log('保存主题设置:', currentTheme.value);
};
</script>
